<template>
  <el-drawer
    :wrapperClosable="false"
    direction="rtl"
    custom-class="demo-drawer"
    :title="title"
    ref="drawer"
    size="40%"
    :visible.sync="dialogFormVisible"
    @close="close"
  >
    <div class="demo-drawer__content">
      <el-form ref="form" label-width="80px" :model="form" :rules="rules">
        <el-form-item label="小组名称" prop="groupName">
          <el-input :disabled="type === 1" v-model="form.groupName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="小组成员:">
          <el-select v-model="useridlist" multiple placeholder="请选择小组成员" @change="changedpment" style="width: 100%">
            <el-option v-for="item in userList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" v-show="type != 1">
          <el-input v-model="form.memo" autocomplete="off" type="textarea" />
        </el-form-item>
        <el-form-item label="排序" v-show="type != 1">
          <el-input-number v-model="form.sort" controls-position="right"></el-input-number>
        </el-form-item>

        <el-form-item label="加分分数" v-if="type === 1" prop="score">
          <el-input-number v-model="form.score" controls-position="right"></el-input-number>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="close" type="warning">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
  import { SelMiniUserListN, AddActivitygroup, EditActivitygroup, GroupAddUserScore } from '@/api/userManagement'

  export default {
    name: 'department',
    data() {
      const scoerG1 = (rule, value, callback) => {
        if (value <= 0) {
          callback(new Error('分数不能小于1'))
        } else {
          callback()
        }
      }
      return {
        type: 0,
        useridlist: [],
        userList: [],
        form: {
          userList: [],
          groupName: '',
          sort: 0,
          memo: '',
          score: 0,
        },
        rules: {
          groupName: [{ required: true, trigger: 'blur', message: '请输入小组名称' }],
          score: [{ required: true, trigger: 'blur', validator: scoerG1 }],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    watch: {
      useridlist(newvel) {
        this.form.userList = this.userList.filter((obj) => newvel.includes(obj.id))
      },
    },
    async created() {
      this.fetchData()
    },
    methods: {
      async fetchData() {
        let { data } = await SelMiniUserListN()
        this.userList = data
      },
      changedpment(e) {},
      succestlist(e) {
        this.form.bookImg = e.response.data
      },
      showEdit(row, type) {
        this.filelist = []

        if (!row) {
          this.title = '新增小组'
        } else {
          this.form = Object.assign({}, row)
          this.useridlist = this.form.userList.map((item) => item.id)
          if (type === 1) {
            this.form.score = 1
            this.type = 1
            this.title = '小组添加积分'
            this.userList = this.form.userList
          } else {
            this.title = '编辑小组'
          }
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
        this.$emit('fetch-data')
        this.fetchData()
      },
      save() {
        let that = this
        if (this.type === 1) {
          that.$refs['form'].validate(async (valid) => {
            if (valid) {
              const data = await GroupAddUserScore({ userIdList: this.useridlist, score: this.form.score })
              if (data.code === 1000) {
                that.$baseMessage(data.msg, 'success')
                that.close()
              }
            } else {
              return false
            }
          })
        } else {
          if (that.form.userList.some((element) => element.activityGroupId != 0 && element.activityGroupId != that.form.id)) {
            that.$baseConfirm('当前选中用户有已经拥有小组的用户，是否继续', null, async () => {
              that.$refs['form'].validate(async (valid) => {
                if (valid) {
                  const { msg } = that.title === '新增小组' ? await AddActivitygroup(that.form) : await EditActivitygroup(that.form)
                  that.$baseMessage(msg, 'success')
                  that.close()
                } else {
                  return false
                }
              })
            })
          } else {
            that.$refs['form'].validate(async (valid) => {
              if (valid) {
                const { msg } = that.title === '新增小组' ? await AddActivitygroup(that.form) : await EditActivitygroup(that.form)
                that.$baseMessage(msg, 'success')
                that.close()
              } else {
                return false
              }
            })
          }
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep .demo-drawer__content {
    height: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .demo-drawer__footer {
      bottom: 0;
    }
  }
</style>
